<template>
  <view class="commonLim-list">
    <view class="searchclass">
      <view class="left">
        <up-search
          v-model="query.materialCode"
          placeholder="请输入物料编码"
          :clearabled="true"
          :showAction="false"
          v-if="pickType == 1"
          @search="handleSearch"
        />
        <view v-show="isshow1" class="left">
          <div @click="handlefocus1">
            <up-search
              v-model="query.materialTypeName"
              placeholder="请选择材质"
              :clearabled="true"
              :showAction="false"
              disabled
            />
          </div>
          <div @click="handlefocus2" v-show="isshow2">
            <up-search
              v-model="query.specificationName"
              placeholder="请选择规格型号"
              :clearabled="true"
              :showAction="false"
              disabled
            />
          </div>
        </view>
      </view>
      <view class="right">
        <up-button
          type="primary"
          @click="handleSearch"
          size="small"
          shape="circle"
          class="first"
          >搜索</up-button
        >
        <up-button
          type="primary"
          @click="handlecancel"
          size="small"
          shape="circle"
          >重置</up-button
        >
      </view>
    </view>
    <view class="upCcon">
      <up-icon
        :name="iconName"
        size="50rpx"
        color="#3c9cff"
        @click="handleicon"
      ></up-icon>
    </view>
    <scroll-view class="modelClass" scroll-y @scrolltolower="onScrollToBottom">
      <view v-show="state.rows.length">
        <checkbox-group @change="checkboxChange">
          <view
            v-for="item in state.rows"
            :key="item.id"
            class="bigBox"
            v-show="pickType == 0"
          >
            <view class="wrapBox">
              <view class="smallBox">
                <text class="maxwidth"> 材质:{{ item.materialTypeName }} </text>
              </view>
              <view class="smallBox">
                <text> 规格型号:{{ item.specificationName }} </text>
              </view>
              <view class="smallBox">
                <text> 炉号:{{ item.heatNo }} </text>
              </view>
              <view class="smallBox">
                <text> 厂商:{{ item.supplierName }} </text>
              </view>
              <view class="smallBox">
                <text> 备注:{{ item.remark }} </text>
              </view>
            </view>
            <view class="checkClassbox">
              <checkbox
                :value="item.id"
                :checked="item.checked"
                :disabled="item.isdisabled"
              />
            </view>
          </view>
          <view
            v-for="item in state.rows"
            :key="item.id"
            class="bigBox"
            v-show="pickType == 1"
          >
            <view class="wrapBox">
              <view class="smallBox">
                <text class="maxwidth"> 物料编码:{{ item.materialCode }} </text>
              </view>
              <view class="smallBox">
                <text class="maxwidth"> 材质:{{ item.materialTypeName }} </text>
              </view>
              <view class="smallBox">
                <text> 规格型号:{{ item.specificationName }} </text>
              </view>
              <view class="smallBox">
                <text> 炉号:{{ item.heatNo }} </text>
              </view>
              <view class="smallBox">
                <text> 改制量:{{ item.productionQuantity }} </text>
              </view>
              <view class="smallBox">
                <text> 工单编号:{{ item.workOrderCode }} </text>
              </view>
              <view class="smallBox">
                <text> 客户简称:{{ item.customerAbbr }} </text>
              </view>
              <view class="smallBox">
                <text> 备注:{{ item.remark }} </text>
              </view>
            </view>
            <view class="checkClassbox">
              <checkbox
                :value="item.id"
                :checked="item.checked"
                :disabled="item.isdisabled"
              />
            </view>
          </view>
        </checkbox-group>
      </view>
      <up-empty mode="data" v-show="state.rows.length == 0"> </up-empty>
      <up-loadmore
        v-if="state.rows.length"
        :status="loadStatus"
        :icon="true"
        loadmore-text="轻轻上拉获取更多"
        loading-text="努力加载中..."
        nomore-text="没有更多了"
        @loadmore="handleloadMore"
      />
    </scroll-view>
    <view class="dengjiClass">
      <button class="commonClass" @click="handleSave">确定</button>
    </view>
  </view>
</template>

<script setup>
import { customerTable, chengpinfnlist } from "./api.js";
import { useMemberStore } from "@/stores/modules/member";
const memberStore = useMemberStore();
const deprops = defineProps(["wftype", "from", "pickType"]);
const iconName = ref("arrow-down");
const isshow1 = computed(() => {
  if (deprops.pickType == 1) {
    if (iconName.value == "arrow-down") {
      return false;
    } else {
      return true;
    }
  } else {
    return true;
  }
});
const isshow2 = computed(() => {
  if (iconName.value == "arrow-down") {
    return false;
  } else {
    return true;
  }
});
const handleicon = () => {
  if (iconName.value == "arrow-down") {
    iconName.value = "arrow-up";
  } else {
    iconName.value = "arrow-down";
  }
};
//点击复选框选中的数据
const seleteDatas = ref([]);
const loadStatus = ref("loadmore");
const query = ref({
  page: 0,
  size: 10,
});
const state = reactive({
  rows: [],
  totals: 0,
});
const loadData = async () => {
  let res = null;
  if (deprops.pickType == 0) {
    res = await customerTable(query.value);
  } else if (deprops.pickType == 1) {
    res = await chengpinfnlist(query.value);
  }
  state.rows = [...state.rows, ...res.content];
  memberStore.lingliaoyaoqiu.forEach((item) => {
    const obj = state.rows.find((list) => list.id == item.selectedMaterialId);
    if (obj) {
      obj.isdisabled = true;
    }
  });
  state.totals = res.totalElements;
  if (state.rows.length < state.totals) {
    loadStatus.value = "loadmore"; // 仍可继续上拉
  } else {
    loadStatus.value = "nomore"; // 已全部加载
  }
};

const handlefocus1 = () => {
  uni.navigateTo({
    url: `/pages/searchcaizhi/searchcaizhi?from=caizhi`,
  });
};
const handlefocus2 = async () => {
  if (query.value.materialTypeId) {
    uni.navigateTo({
      url: `/pages/searchcaizhi/searchcaizhi?from=guigexinghao&pId=${query.value.materialTypeId}`,
    });
  } else {
    uni.showToast({
      icon: "none",
      title: "请选择材质",
    });
  }
};

const Consistentlogic = async () => {
  try {
    console.log("加载中");
    uni.showLoading({
      title: "加载中",
    });
    state.rows = [];
    state.totals = 0;
    await loadData();
  } finally {
    uni.hideLoading();
  }
};
const handleSearch = () => {
  query.value.page = 0;
  Consistentlogic();
};
const handlecancel = () => {
  query.value = {
    page: 0,
    size: 10,
  };
  Consistentlogic();
};

const handleloadMore = async () => {
  // 防止重复请求
  if (loadStatus.value === "loading") return;
  loadStatus.value = "loading";
  // 判断是否还有更多数据
  if (state.rows.length < state.totals) {
    loadStatus.value = "loadmore"; // 仍可继续上拉
    query.value.page += 1; // 为下一次请求准备页码
    try {
      await loadData();
    } catch (error) {
      console.log("加载数据失败", error);
    }
  } else {
    loadStatus.value = "nomore"; // 已全部加载
  }
};
function onScrollToBottom() {
  // 当 scroll-view 触底且状态为 loadmore 时手动调用
  if (loadStatus.value === "loadmore") {
    handleloadMore();
  }
}

const handleSave = () => {
  if (seleteDatas.value.length == 0) {
    return uni.showToast({
      icon: "none",
      title: "请勾选列表数据",
    });
  } else {
    memberStore.stateTable.rows = seleteDatas.value;
    uni.navigateBack({
      delta: 1,
    });
  }
};
const checkboxChange = (e) => {
  const values = e.detail.value;
  state.rows.forEach((item) => {
    if (values.includes(item.id)) {
      item.checked = true;
      const obj = seleteDatas.value.find((list) => list.id == item.id);
      if (!obj) {
        seleteDatas.value.push(item);
      }
    } else {
      item.checked = false;
      seleteDatas.value = seleteDatas.value.filter(
        (list) => list.id !== item.id
      );
    }
  });
  console.log(state.rows, 1234566);
};
onLoad(() => {
  uni.setNavigationBarTitle({
    title:
      deprops.pickType == 0
        ? "选择原料"
        : deprops.pickType == 1
        ? "选择成品"
        : "",
  });
});
onShow(() => {
  if (memberStore.from_Page == "caizhi") {
    query.value.materialTypeId = memberStore.zemId;
    query.value.materialTypeName = memberStore.zemName;
    query.value.specificationId = "";
    query.value.specificationName = "";
  } else if (memberStore.from_Page == "guigexinghao") {
    query.value.specificationId = memberStore.zemId;
    query.value.specificationName = memberStore.zemName;
  }
  memberStore.zemId = "";
  memberStore.zemName = "";
  memberStore.from_Page = "";
  handleSearch();
});
</script>

<style lang="scss" scoped>
</style>